import React from 'react';
// import  './index.less';
import { Button, Col, Form, Input, Row, Space } from 'antd';
import './index.less'

interface QueryFilterItemsProps {
  name?: string
  label?: string,
  children?: React.ReactNode
}
function QueryFilter(props: {
  form: any;
  reset: () => void;
  submit: () => void;
  items?: QueryFilterItemsProps[]
  children?: React.ReactNode;
}) {
  const { children, items } = props

  const handleSubmit = () => {
    props.submit();
  };

  const handleReset = () => {
    props.reset();
  };
  const childrenRender = () => {
    return React.Children.map(children, (item: any, index: number) => {
      return <Col sm={{ span: 16 }} md={{ span: 12 }} lg={{ span: 6 }}>
        {item}
      </Col>
    })
  }
  const itemsRender = () => {
    return (items as QueryFilterItemsProps[]).map((item,index) => {
      let { children = <Input placeholder={item.label} />, ...rest } = item

      return <Col key={index} sm={{ span: 16 }} md={{ span: 12 }} lg={{ span: 6 }}>
        <Form.Item {...rest}>
          {children}
        </Form.Item>
      </Col>
    })
  }
  return (
    <div className="query-filter-wrapper">
      <Form
        labelAlign="left"
        form={props.form}
        wrapperCol={{ span: 18 }}
        className="query-filter-form"
      >
        <Row wrap={false}>
          <Col flex="auto">
            <Row gutter={[16, 24]}>
              {Array.isArray(items) ? itemsRender() : childrenRender()}
              </Row>
          </Col>

          <Col flex="138px">
            <div className={`query-filter-right`}>
              <Space>
                <Button type="primary" onClick={handleSubmit}>
                  查询
                </Button>
                <Button onClick={handleReset}>
                  重置
                </Button>
              </Space>
            </div>
          </Col>
        </Row>
      </Form>

    </div>
  );
}

export default QueryFilter;